<template>
    <div>
        <h1>卡券列表</h1>
        <input type="text" placeholder="卡券名称模糊查询" v-model="cs.name">
        <select v-model="cs.tid">
            <option value="0">请选择卡券类型</option>
            <option v-for="d in lx" :value="d.tid">{{ d.tname }}</option>
        </select>
        <select v-model="cs.fid">
            <option value="0">请选择适用范围</option>
            <option v-for="d in fw" :value="d.fid">{{ d.fname }}</option>
        </select>
        <select v-model="cs.sid">
            <option value="0">请选择状态</option>
            <option v-for="d in zt" :value="d.sid">{{ d.sname }}</option>
        </select>
        <input type="button" value="查询" class="btn btn-success" @click="show">
        <input type="button" value="重置" class="btn btn-success" @click="qk">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="quan" @change="qx">
                    </td>
                    <td>编号</td>
                    <td>卡券名称</td>
                    <td>卡券类型</td>
                    <td>适用范围</td>
                    <td>适用日期</td>
                    <td>有效期</td>
                    <td>价格</td>
                    <td>状态</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>
                        <input type="checkbox" v-model="fx" :value="d.kid">
                    </td>
                    <td>{{ d.kid }}</td>
                    <td>{{d.kname}}</td>
                    <td>{{ d.tname }}</td>
                    <td>{{ d.fname }}</td>
                    <td>{{ d.kdate }}</td>
                    <td>{{ d.yxq }}</td>
                    <td>{{ d.price }}</td>
                    <td :style="d.sname=='上架'?'color:red;':'color:green'">{{ d.sname }}</td>
                    <td>
                        <img :src="'https://localhost:7098/'+d.imgUrl" style="width: 60px;height: 60px;">
                    </td>
                    <td>
                        <input type="button" :value="d.sname=='上架'?'下架':'上架'  " @click="upd(d.kid)">
                        <input type="button" value="删除" @click="del(d.kid)">
                        <input type="button" value="编辑" @click="bj(d.kid)">
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{ cs.pcount }}页, 一共{{ cs.count }}条,当前第{{ cs.index }}页, 每页{{ cs.size }}条
        <br>
        <input type="button" value="首页" @click="fan(1)">
        <input type="button" value="上一页" @click="fan(2)">

        <input v-for="d in cs.pcount" type="button" :value="d" @click="an(d)">

        <input type="button" value="下一页" @click="fan(3)">
        <input type="button" value="尾页" @click="fan(4)">
        <select v-model="cs.size" @change="yrl">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="8">8</option>
        </select>
        <input type="number" v-model="cs.index">
        <input type="button" value="跳转" @click="shows">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import{ref,onMounted, pushScopeId} from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter()
//翻页
const fan=(m:any)=>{
    if(m==1){
        cs.value.index=1;
        show()
    }
    if(m==2){
        if(cs.value.index>1){
            cs.value.index-=1;
            show()
        }
    }
    if(m==3){
        if(cs.value.index<cs.value.pcount){
            cs.value.index+=1;
            show()
        }
    }

    if(m==4){
        cs.value.index=cs.value.pcount;
        show()
    }
}
//页容量
const yrl=()=>{
    cs.value.index=1;
    show()
}
//跳转
const shows=()=>{
    if(cs.value.index>0 && cs.value.index<=cs.value.pcount){
        show()
    }
    else{
        cs.value.index=1
        show()
    }
}
//按钮
const an=(d:any)=>{
    cs.value.index=d;
    show()
}
const data=ref([
     {
      "kid": 1,
      "kname": "特惠套餐",
      "kdate": "周一,周二",
      "yxq": "只限当天",
      "price": 135,
      "imgUrl": "string",
      "isdelete": false,
      "tid": 1,
      "tname": "时长卡",
      "sid": 1,
      "sname": "下架",
      "start": false,
      "fid": 1,
      "fname": "门店1"
    }
])
//参数
const cs=ref({
    index:1,
    size:5,
    fid:0,
    name:"",
    tid:0,
    sid:0,
    count:0,
    pcount:0
})
//重置
const qk=()=>{
    cs.value.fid=0,
   cs.value.name="",
   cs.value.tid=0,
   cs.value.sid=0,
   cs.value.index=1,
   show()
}
//文档就绪
onMounted(()=>{
    bang1()
    bang2()
    bang3()
    show()
})
//显示
const show=()=>{
    axios.get("/api/Kq/GetKq",{params:cs.value}).then(res=>{
        data.value=res.data.data
        cs.value.count=res.data.count
        cs.value.pcount=Math.ceil(cs.value.count/cs.value.size)
    })
}
//绑定类型
const lx=ref({})
const bang1=()=>{
    axios.get("/api/Kq/GetKtypes").then(res=>{
        lx.value=res.data
    })
}
//绑定范围
const fw=ref({})
const bang2=()=>{
    axios.get("/api/Kq/GetKfws").then(res=>{
        fw.value=res.data
    })
}
//绑定状态
const zt=ref({})
const bang3=()=>{
    axios.get("/api/Kq/GetKstarts").then(res=>{
        zt.value=res.data
    })
}
//全选反选
const quan=ref(false)
const fx=ref([])
const qx=()=>{
    if(quan.value){
        data.value.forEach(a=>{
            fx.value.push(a.kid)
        })
    }
    else{
        fx.value=[];//清空
    }
}
//修改状态
const upd=()=>{
    debugger
    axios.get("/api/Kq/UpdStart",{params:{id:fx.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('修改成功');
            show()
        }
        else{
            alert('修改失败');
            return;
        }
    })
}
//删除
const del=(mid:any)=>{
    if(confirm('您确定要删除吗')){
        axios.get("/api/Kq/DelKq",{params:{id:mid}}).then(res=>{
            if(res.data>0){
                alert('删除成功');
                show()
            }
            else{
                alert('删除失败');
                return;
            }
        })
    }
    
}
//编辑
const bj=(mid:any)=>{
    router.push({path:"/upds",query:{id:mid}})
}
</script>

<style scoped>

</style>